import { Column } from '@ant-design/charts';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { PageContainer, ProCard, ProForm, ProFormCascader, ProFormRadio, ProFormSelect, QueryFilter } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { Badge, Button, Card, Cascader, Descriptions, DescriptionsProps, FormInstance, Space, Table, Tabs } from 'antd';
import { useEffect, useRef, useState } from 'react';
import AddAudioVisual from './AddAudioVisual';
import { detailBriefing, timesBriefing } from '@/services/api/api-monitor-briefing';

interface PageAudioVisualBriefingProps { }

const PageAudioVisualBriefing: React.FC<PageAudioVisualBriefingProps> = (props) => {
    const access = useAccess();

    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    const formRef = useRef<FormInstance>();
    const tabList =
        [
            {
                label: '安播监测',
                key: 'abjc',
            },
            {
                label: '广告监测',
                key: 'ggjc',
            },
            {
                label: '视听新媒体监测',
                key: 'stxmt',
            },
            {
                label: 'IPTV 频道监测',
                key: 'iptv',
            },
        ];
    const [tabActiveKey, setTabActiveKeyState] = useState<string>('abjc');

    const [timeOption, setTimeOption] = useState([
        // {
        //     label: '第1期', value: '1'
        // },
        // {
        //     label: '第2期', value: '2'
        // },
        // {
        //     label: '第3期', value: '3'
        // },
        // {
        //     label: '第4期', value: '4'
        // },
        // {
        //     label: '第5期', value: '5'
        // },
        // {
        //     label: '第6期', value: '6'
        // },
        // {
        //     label: '第7期', value: '7'
        // },
        // {
        //     label: '第8期', value: '8'
        // },
        // {
        //     label: '第9期', value: '9'
        // }
    ])

    const [selectTime, setSelectTime] = useState<string>()
    const [selectYear, setSelectYear] = useState<string>('2024')

    const [detailData, setDetailData] = useState<MonitorData.briefingDetail>()

    const [yearOption, setYearOption] = useState([
        {
            label: '2020年', value: '2020'
        },
        {
            label: '2021年', value: '2021'
        },
        {
            label: '2022年', value: '2022'
        },
        {
            label: '2023年', value: '2023'
        },
        {
            label: '2024年', value: '2024'
        },
        {
            label: '2025年', value: '2025'
        }
    ])

    const getBrefingData = async (year, time) => {
        const res = await detailBriefing({ year, time })
        if (res.code === 0) {
            setDetailData(res.data)
        }
    }


    const resetTimeOption = async (year) => {
        const res = await timesBriefing({ year })
        console.log(res);
        if (res.code === 0) {
            if (Array.isArray(res.data) && res.data.length > 0) {
                const list = res.data.map((item) => {
                    return { label: `第${item}期`, value: item }
                })
                setTimeOption(list)
                getBrefingData(selectYear, list[0]?.value)
            } else {
                setTimeOption([])
            }
            formRef.current?.submit();
        }
      
        setSelectTime(timeOption[0]?.value)
    }

    useEffect(() => {
        resetTimeOption('2024')

    }, [])



    useEffect(() => {
        getBrefingData(selectYear, selectTime)

    }, [selectYear, selectTime])


    return (
        <PageContainer
            header={{
                title: false,
                breadcrumb: {},
            }}
        // tabList={tabList}
        // onTabChange={setTabActiveKeyState}
        >
            <QueryFilter
                submitter={false}
                span={24}
                labelWidth="auto"
                split
                formRef={formRef}
                initialValues={{
                    year: '2024',
                    time: '5'
                }}
                onFinish={async (value) => {
                    console.log(value);
                }}
            >
                <ProForm.Group title="时间" >
                    <ProFormSelect
                        name="year"
                        placeholder="选择年限"
                        fieldProps={{
                            options: yearOption,
                            style: {
                                width: 300
                            },
                            removeIcon: true,
                            allowClear: true,
                            showSearch: true,
                            maxTagCount: 'responsive',
                            onClear() {
                                setSelectYear('2024')
                                formRef.current?.submit();
                            },
                            onChange(value, selectOptions) {
                                setSelectYear(value)
                                resetTimeOption(value)

                            },
                        }}
                    />
                    {timeOption && <ProFormSelect
                        name="time"
                        placeholder="选择期数"
                        fieldProps={{
                            options: timeOption,
                            style: {
                                width: 300
                            },
                            removeIcon: true,
                            allowClear: true,
                            showSearch: true,
                            maxTagCount: 'responsive',
                            onClear() {
                                // setSelectTime(timeOption[0]?.value)
                                formRef.current?.submit();
                            },
                            onChange(value, selectOptions) {
                                setSelectTime(value)
                                formRef.current?.submit();
                            },
                        }}
                    />}
                    <div style={{ position: 'absolute', right: 0 }}>
                        <AddAudioVisual
                            onRefurbish={() => {
                                getBrefingData()
                            }} />
                    </div>
                </ProForm.Group>
            </QueryFilter>
            <Tabs

                items={tabList}
                onChange={(key) => {
                    setTabActiveKeyState(key);
                }}

            />
            <Space direction="vertical" size={50} style={{ display: 'flex' }}>
                {/* 安播监测 */}
                {tabActiveKey === 'abjc' && <>
                    <Descriptions bordered >
                        <Descriptions.Item label="月份">{detailData?.month}</Descriptions.Item>
                        <Descriptions.Item label="停播事故次数">{detailData?.stopIncidentCount}</Descriptions.Item>
                        <Descriptions.Item label="重大事故次数">{detailData?.majorIncidentCount}</Descriptions.Item>
                        <Descriptions.Item label="总停播时长">{detailData?.totalStopDuration}</Descriptions.Item>
                        <Descriptions.Item label="责任事故次数">{detailData?.responsibilityIncidents}</Descriptions.Item>
                        <Descriptions.Item label="技术事故次数">{detailData?.technicalIncidents}</Descriptions.Item>

                        <Descriptions.Item label="上月停播事故次数">{detailData?.lastMonthStopIncidentCount}</Descriptions.Item>
                        <Descriptions.Item label="上月重大事故次数">{detailData?.lastMonthMajorIncidentCount}</Descriptions.Item>
                        <Descriptions.Item label="上月总停播时长">{detailData?.lastMonthTotalStopDuration}</Descriptions.Item>

                        <Descriptions.Item label="去年同期停播事故次数">{detailData?.samePeriodLastYearStopIncidentCount}</Descriptions.Item>
                        <Descriptions.Item label="去年同期重大事故次数">{detailData?.samePeriodLastYearMajorIncidentCount}</Descriptions.Item>
                        <Descriptions.Item label="去年同期总停播时长">{detailData?.samePeriodLastYearTotalStopDuration}</Descriptions.Item>
                        <Descriptions.Item label="事故单位/频道数">{detailData?.totalChannel}</Descriptions.Item>
                        <Descriptions.Item label="总事故次数">{detailData?.totalCount}</Descriptions.Item>
                        <Descriptions.Item label="总事故时长">{detailData?.totalDuration}</Descriptions.Item>
                    </Descriptions>
                    <Table dataSource={detailData?.incidentData} pagination={false} style={{ marginTop: 10, marginBottom: 10 }}>
                        <Table.Column title="事故单位" dataIndex="unit" key="unit" />
                        <Table.Column title="事故频道" dataIndex="channel" key="channel" />
                        <Table.Column title="事故次数" dataIndex="count" key="count" />
                        <Table.Column title="事故时长" dataIndex="duration" key="duration" />
                    </Table>
                </>}
                {/* 广告监测 */}
                {tabActiveKey === 'ggjc' && <>
                    <Descriptions bordered >
                        <Descriptions.Item label="公益广告条数">{detailData?.publicServiceAdsCount} 条</Descriptions.Item>
                        <Descriptions.Item label="公益广告时长">{detailData?.publicServiceAdsDuration}</Descriptions.Item>
                        <Descriptions.Item label="商业广告条数">{detailData?.commercialAdsCount}</Descriptions.Item>
                        <Descriptions.Item label="商业广告时长">{detailData?.commercialAdsDuration}</Descriptions.Item>
                        <Descriptions.Item label="违规行为总数">{detailData?.violationsTotal} 起</Descriptions.Item>
                        <Descriptions.Item label="违规播出电视购物短片广告数">{detailData?.violationsShoppingAds} 个</Descriptions.Item>
                        <Descriptions.Item label="违规医药广告数">{detailData?.violationsMedicalAds} 个</Descriptions.Item>
                        <Descriptions.Item label="商业广告超时播出时段数">{detailData?.violationsCommercialTimeout} 个</Descriptions.Item>
                    </Descriptions>
                    <Table dataSource={detailData?.dataGg} pagination={false} style={{ marginTop: 10, marginBottom: 10 }}>
                        <Table.Column title="频道名称" dataIndex="channel" key="channel" />
                        <Table.Column title="监测日期" dataIndex="date" key="date" align="center" />
                        <Table.Column title="商业广告超时时段（个）" dataIndex="timeout" key="timeout" align="center" />
                        <Table.Column title="违规播出电视购物短片广告（个）" dataIndex="shoppingAds" key="shoppingAds" align="center" />
                        <Table.Column title="违规医药广告（个）" dataIndex="medicalAds" key="medicalAds" align="center" />
                        <Table.Column title="合计" dataIndex="total" key="total" align="center" />
                    </Table>
                </>}
                {/* 视听新媒体监测 */}

                {tabActiveKey === 'stxmt' && <>
                    <Descriptions bordered column={4}>
                        <Descriptions.Item label="持证单位总数">{detailData?.totalUnits}</Descriptions.Item>
                        <Descriptions.Item label="持证单位违规情况">{detailData?.holdCertificateViolations}</Descriptions.Item>
                        <Descriptions.Item label="需换证机构网站">{detailData?.renewed}</Descriptions.Item>
                        <Descriptions.Item label="换证机构违规情况">{detailData?.changeCertificateViolations}</Descriptions.Item>
                    </Descriptions>
                </>}
                {/* IPTV 节目监看情况 */}
                {tabActiveKey === 'iptv' && <>
                    <Descriptions bordered>
                        <Descriptions.Item label="电信频道数">{detailData?.telecomChannels}</Descriptions.Item>
                        <Descriptions.Item label="联通频道数">{detailData?.unicomChannels}</Descriptions.Item>
                        <Descriptions.Item label="移动频道数">{detailData?.mobileChannels}</Descriptions.Item>
                        <Descriptions.Item label="人工监看点播节目数">{detailData?.monitoredPrograms}</Descriptions.Item>
                        <Descriptions.Item label="违规情况">{detailData?.violations}</Descriptions.Item>
                    </Descriptions>
                </>}
            </Space>
        </PageContainer >
    );
};

export default PageAudioVisualBriefing;
